<template>
  <div class="box">
    <Hand title="消息提示" :left="true" :iconbool="false" @back="backPrve">
      <p class="p" @click="goFather">保存</p>
    </Hand>
    <div class="app">
      <div class="box1">
        <van-cell title="系统内音效" class="cell">
          <template #right-icon>
            <van-switch v-model="checked" />
          </template>
        </van-cell>
        <p>如系统内刷新、新消息、点赞等音效</p>
      </div>
      <div class="box1">
        <van-cell title="新消息提醒" class="cell">
          <template #right-icon>
            <van-switch v-model="checked1" />
          </template>
        </van-cell>
        <p>关闭后，程序不运行时将无法收到提醒</p>
      </div>
      <div class="box1">
        <van-cell title="应用内横幅提醒" class="cell">
          <template #right-icon>
            <van-switch v-model="checked2" />
          </template>
        </van-cell>
        <p>提醒将以横幅形式展现</p>
      </div>
      <div class="box1">
        <van-cell title="声音提醒" class="cell">
          <template #right-icon>
            <van-switch v-model="checked3" />
          </template>
        </van-cell>
      </div>
      <div class="box1">
        <van-cell title="震动提醒" class="cell">
          <template #right-icon>
            <van-switch v-model="checked4" />
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script setup>
import Hand from "../../components/Hand.vue";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { showSuccessToast, showFailToast } from "vant";

const checked = ref(true);
const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(true);
const checked4 = ref(false);

const router = useRouter();

const backPrve = () => {
  router.go(-1);
};
const goFather = () => {
  router.push("/SetUp");
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  background: #ecfdfa;
  height: 100vh;
  .p {
    font-family: "微软雅黑";
    font-weight: 400;
    font-size: 20px;
    color: white;
  }
}
.app {
  width: 92vw;
  background-color: rgba(255, 255, 255, 1);
  margin: 4vw 4vw;
}
.box1 {
  position: relative;
  width: 92vw;
  margin-bottom: 1.333vw;
  border-radius: 2.667vw;
  display: flex;
  flex-direction: column;
  border-bottom: 0.133vw solid #ccc;
  font-weight: bold;
  border-bottom: none;

  p {
    position: absolute;
    top: 31px;
    left: 15px;
    font-family: "微软雅黑";
    font-weight: 400;
    font-size: 1.667vw;
    color: #cccccc;
    background: white;
  }
}
</style>
